<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <script src="../lib//react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>

    <!-- 限制类型 -->
    <script src="../lib/prop-types.js"></script>
    <script type="text/babel">
        // 1
        class Cards extends React.Component {
            constructor(props) {
                super(props)
            }
            render() {
                const { arrs } = this.props
                return (
                    arrs.map(item => {
                        const { name, age, gender } = item
                        return <ul key={name}>
                            <li>姓名：{name}</li>
                            <li>年龄：{age}</li>
                            <li>性别：{gender}</li>
                        </ul>
                    })
                )
            }
        }
        const arrs = [
            { name: 'xm', age: 17, gender: 'male' },
            { name: 'xh', age: 18, gender: 'female' }
        ]
        ReactDOM.render(<Cards arrs={arrs} />, document.getElementById('test'))

        // 2.构造器 props、
        class Card extends React.Component {
            // 构造器的作用：1.初始化 state；2.bind 方法；
            // 如果使用构造器，必须调用 super，传 props
            // 1、2 都有替代办法，所以能省略就省略
            constructor(props) {
                console.log(props) // 包括默认值
                super(props)
            }
            render() {
                const { name, age, gender,click } = this.props
                return <ul key={name}>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li onClick={click}>性别：{gender}</li>
                </ul>
            }
            // 属性类型限制
            static propTypes = {
                name: PropTypes.string.isRequired, // 必填
                gender: PropTypes.string,
                age: PropTypes.number,
                click: PropTypes.func // 函数
            }
            // 默认值
            static defaultProps = {
                gender: 'female',
                age: 19
            }
        }

        const p = { name: 'xm2', age: 17, gender: 'male' }
        ReactDOM.render(<Card {...p} />, document.getElementById('test2')) // react 标签属性可以使用 ... 展开对象
        ReactDOM.render(<Card name="xm3" click={()=>{console.log(111)}}/>, document.getElementById('test3'))
    </script>
</body>

</html>